<template>
  <div class="discuss-my-container">
    <div class="back-link">
      <el-button @click="goBack" icon="el-icon-arrow-left" text>返回列表</el-button>
    </div>
    
    <h2>我的讨论</h2>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>
    
    <el-empty v-else-if="discussList.length === 0" description="您还没有发布过讨论"></el-empty>
    
    <div v-else class="discuss-list">
      <div 
        v-for="item in discussList" 
        :key="item.did" 
        class="discuss-item"
      >
        <div class="discuss-item-header">
          <h3 class="discuss-title">{{ item.title }}</h3>
          <div class="discuss-meta">
            <span class="discuss-time">{{ item.createtime }}</span>
            <span class="discuss-stats">
              <el-icon><View /></el-icon> {{ item.readcount }}
              <el-icon class="like-icon"><Star /></el-icon> {{ item.supportcount }}
            </span>
          </div>
        </div>
        <div class="discuss-content">{{ truncateContent(item.content) }}</div>
        <div class="discuss-actions">
          <el-button type="primary" size="small" @click="goToDetail(item.did)">查看详情</el-button>
          <el-button type="danger" size="small" @click="handleDelete(item.did)" :loading="deleteLoading === item.did">删除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { View, Star } from '@element-plus/icons-vue';
import { getMyDiscussList, deleteDiscuss } from '../../services/discuss';
import { useUserStore } from '../../stores/user';

const router = useRouter();
const userStore = useUserStore();
const discussList = ref<any[]>([]);
const loading = ref(false);
const deleteLoading = ref<number | null>(null);

// 检查用户是否已登录
if (!userStore.isAuthenticated) {
  ElMessage.warning('请先登录后再查看我的讨论');
  router.push('/login');
}

// 加载我的讨论列表
const loadMyDiscussList = async () => {
  loading.value = true;
  try {
    const res = await getMyDiscussList();
    discussList.value = res.data || [];
  } catch (error: any) {
    ElMessage.error(error.message || '加载我的讨论列表失败');
  } finally {
    loading.value = false;
  }
};

// 截断内容，显示前100个字符
const truncateContent = (content: string) => {
  if (!content) return '';
  return content.length > 100 ? content.substring(0, 100) + '...' : content;
};

// 返回列表
const goBack = () => {
  router.push('/discuss');
};

// 跳转到讨论详情页
const goToDetail = (did: number) => {
  router.push(`/discuss/${did}`);
};

// 删除讨论
const handleDelete = async (did: number) => {
  try {
    await ElMessageBox.confirm('确定要删除该讨论吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    
    deleteLoading.value = did;
    await deleteDiscuss({ did });
    ElMessage.success('删除成功');
    // 重新加载讨论列表
    loadMyDiscussList();
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '删除失败');
    }
  } finally {
    deleteLoading.value = null;
  }
};

onMounted(() => {
  loadMyDiscussList();
});
</script>

<style scoped>
.discuss-my-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.back-link {
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #303133;
}

.loading-container {
  padding: 40px 0;
}

.discuss-list {
  margin-top: 20px;
}

.discuss-item {
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #e6e6e6;
  transition: all 0.3s;
}

.discuss-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.discuss-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.discuss-title {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.discuss-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
  color: #909399;
}

.discuss-time {
  margin-bottom: 5px;
}

.discuss-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discuss-stats .el-icon {
  margin-right: 5px;
}

.like-icon {
  color: #f56c6c;
}

.discuss-content {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 15px;
}

.discuss-actions {
  display: flex;
  gap: 10px;
}
</style> 